<template>
    <el-container class="page-container">
        
        <!-- 顶部 -->
        <el-header height="auto" class="page-header">
            <!-- <div class="top-bar">
                <div class="logo-container">
                    <div class="logo-placeholder"></div>
                    <span class="logo-text">学生承祖</span>
                </div>
                <div class="user-nav">
                    <span @click="">用户登录</span>
                    <span @click="">注册</span>
                    <span @click="">帮助中心</span>
                    <span @click="">网站导航 ≡</span>
                </div>
            </div> -->
            <Header />
            <div class="banner">
                <img src="../../../assets/images/family_topbg.png" alt="" class="family-bg"/>
                <div class="banner-title">
                    <h1 class="family-name">{{ familyInfo.name }}</h1>
                </div>
                <nav class="main-nav">
                    <div class="main-nav-container">
                        <img
                            src="../../../assets/images/family_navbg.png"
                            mode="scaleToFill"
                        />
                        <span @click="goToPath('familyHome')" class="nav-item" :class="pathType == 'familyHome' ? 'active' : ''">首页</span>
                        <span @click="goToPath('introduce')" class="nav-item" :class="pathType == 'introduce' ? 'active' : ''">家族馆介绍</span>
                        <span @click="goToPath('article1')" class="nav-item" :class="pathType == 'article1' ? 'active' : ''">家族馆记事</span>
                        <span @click="goToPath('article2')" class="nav-item" :class="pathType == 'article2' ? 'active' : ''">家族馆文化</span>
                        <span @click="goToPath('personage')" class="nav-item" :class="pathType == 'personage' ? 'active' : ''">人物纪念</span>
                        <span @click="goToPath('leavel')" class="nav-item" :class="pathType == 'leavel' ? 'active' : ''">追思留言</span>
                    </div>
                    
                    
                </nav>
            </div>
        </el-header>

        <!-- 主体内容区 -->
        <el-main class="page-main" >
            <div class="page-main-container" v-if="pathType == 'familyHome'">
                <el-row :gutter="24">
                    <!-- 左侧栏 -->
                    <el-col :span="16">
                        <div class="left-column">
                            <!-- 导语 -->
                            <div class="intro-scroll-wrapper">
                                <div class="intro-scroll-content">
                                    <h3 class="scroll-title">导语</h3>
                                    <p v-if="familyInfo.intro">
                                        {{ familyInfo.intro }}
                                    </p>
                                    <p v-else>暂无导语</p>
                                </div>
                            </div>

                            <!-- 人物纪念馆 -->
                            <el-card class="box-card" shadow="never">
                                <template #header>
                                    <div class="card-header">
                                        <span>人物纪念馆</span>
                                        <el-button link @click="goToPath('personage')"> 更多 <el-icon><ArrowRight /></el-icon> </el-button>
                                    </div>
                                </template>
                                <div class="memorial-hall" v-if="graveyardList.length > 0">
                                    <div v-for="(person, index) in graveyardList" :key="index" class="person-item" @click="goToMuDetail(person.mu_id)">
                                        <div class="person-avatar-placeholder">
                                            <el-image
                                                :src="person.avatar"
                                                mode="scaleToFill"
                                            />
                                        </div>
                                        <div class="person-name">{{ person.mu_name }}</div>
                                    </div>
                                </div>
                                <div v-else style="width: 100%; text-align: center;">
                                    <el-empty description="暂无人物纪念" />
                                </div>
                            </el-card>

                            <!-- 家族馆动态 -->
                            <el-card class="box-card" shadow="never">
                                <template #header>
                                    <div class="card-header">
                                        <span>家族馆动态</span>
                                    </div>
                                </template>
                                <div class="dynamics-list" v-if="totalArticles.length > 0">
                                    <div v-for="(post, index) in totalArticles" :key="index" class="dynamic-item" @click="goToArticleDetail(post.id)">
                                        <!-- <div class="dynamic-avatar-placeholder"></div> -->
                                        <div class="dynamic-content">
                                            <p class="dynamic-text">{{ post.title }}</p>
                                            <div class="dynamic-meta">
                                                <span>发布时间：{{ post.create_time }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- <div class="no-more-posts">暂无其他文章</div> -->
                                </div>
                                <div v-else style="width: 100%; text-align: center;">
                                    <el-empty description="暂无其他文章" />
                                </div>
                            </el-card>
                            <!-- 追思留言 -->
                            <el-card class="box-card form-card" shadow="never">
                                <template #header>
                                    <div class="card-header">
                                        <span>追思留言</span>
                                    </div>
                                </template>
                                <el-form :model="leavelForm" label-position="left" label-width="60px" :rules="rules" ref="ruleFormRef">
                                    <el-form-item label="留言:">
                                        <el-input v-model="leavelForm.content" type="textarea" :rows="4" />
                                    </el-form-item>
                                    
                                    <el-form-item label="留言人:">
                                        <el-input v-model="leavelForm.sign_name" />
                                    </el-form-item>
                                    <div class="tribute-icons">
                                        <div class="icon-item" :class="[activeTab == item.id ? 'active' : '']" v-for="(item, index) in jidianCateList" :key="index" @click="changejidian(item.id)">
                                            <span>{{ item.name }}</span>
                                        </div>
                                        
                                    </div>
                                    <div class="offerings-container" v-if="jidianList.length > 0" style="width: calc(100% - 60px);margin-left: 60px;">
                                        <el-radio-group v-model="selectedOffering" class="offerings-grid" >
                                            <div v-for="itemObj in jidianList" :key="itemObj.id" class="offering-item">
                                                <div class="offering-image-placeholder">
                                                    <!-- 使用 ElImage 并提供错误插槽作为占位符 -->
                                                    <el-image :src="itemObj.imageUrl" fit="contain">
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-image :src="itemObj.file_url" fit="contain" class="error-image"></el-image>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                </div>
                                                <div class="offering-info">
                                                    <el-radio :label="itemObj.id">
                                                        {{ itemObj.name }}
                                                    </el-radio>
                                                </div>
                                            </div>
                                        </el-radio-group>

                                        <!-- 分页 -->
                                        <div class="pagination-controls">
                                            <pagination v-model="pageInfo" @change="getArticleList" />
                                        </div>
                                    </div>
                                    <el-form-item style="margin-top: 10px;width: 200px;">
                                        <el-button class="submit-btn" @click="submitMessage(ruleFormRef)">提交</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>
                        </div>
                    </el-col>

                    <!-- 右侧栏 -->
                    <el-col :span="8">
                        <div class="right-column">
                            <!-- 新增：会员登录模块 -->
                            <el-card class="box-card login-card" shadow="never">
                                <template #header>
                                    <div class="card-header">
                                        <span>会员登录</span>
                                    </div>
                                </template>
                                <LoginPanel />
                            </el-card>

                            

                            <!-- 留言列表 -->
                            <el-card class="box-card" shadow="never">
                                <template #header>
                                    <div class="card-header">
                                        <span>留言列表</span>
                                    </div>
                                </template>
                                <div class="guestbook-list">
                                    <div v-for="(post, index) in leaveNoteList" :key="index" class="dynamic-item">
                                        <div class="dynamic-avatar-placeholder">
                                            <el-image
                                                :src="post.jidian_info.file_url"
                                                mode="scaleToFill"
                                            />
                                        </div>
                                        <div class="dynamic-content">
                                            <p class="dynamic-text">{{ post.content }}</p>
                                            <div class="dynamic-meta">
                                                <span>签名：{{ post.sign_name }}</span>
                                                <span>{{ post.create_time }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="page-main-container" v-if="pathType == 'introduce'">
                <div class="page-main-title">
                    <span>家族馆介绍</span>
                </div>
                <div class="page-main-page-text">
                    <span v-if="familyInfo.desc">
                        {{ familyInfo.desc }}
                    </span>
                    <div v-else style="width: 100%; text-align: center;">暂无介绍</div>
                </div>

            </div>
            <div class="page-main-container" v-if="pathType == 'article1'">
                <div class="page-main-page-container">
                    <!-- 使用 Element Plus 的 Row 组件作为容器，gutter 属性可以添加列之间的间距 -->
                    <el-row class="content-wrapper">
                        <!-- 左侧推荐文章栏，占据 24 份中的 6 份 -->
                        <el-col :span="6">
                            <div class="sidebar">
                                <h3 class="sidebar-title">推荐文章</h3>
                                <ul class="recommended-list" v-if="totalArticles.length > 0">
                                    <li v-for="article in totalArticles" :key="article.id">
                                        <span @click="goToArticleDetail(article.id)">{{ article.title }}</span>
                                    </li>
                                </ul>
                                <div v-else style="width: 100%; text-align: center;">暂无推荐文章</div>
                            </div>
                        </el-col>
                        <!-- 右侧主内容区，占据 24 份中的 18 份 -->
                        <el-col :span="18">
                            <div class="main-content">
                                <h2 class="main-title">家族馆动态</h2>
                                <div class="articles-list" v-if="mainArticles.length > 0">
                                    <ul>
                                        <li v-for="article in mainArticles" :key="article.id" class="article-item">
                                            <span @click="goToArticleDetail(article.id)" class="article-title">・ {{ article.title }}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagination-summary" v-if="mainArticles.length > 0">
                                    <span>文章总数:{{ totalArticlesCount }}</span>
                                    <!-- <span>分页:{{ currentPage }}/{{ totalPages }}</span> -->
                                </div>
                                <div v-if="mainArticles.length == 0" style="width: 100%; text-align: center;">
                                    <el-empty description="暂无文章" />
                                </div>
                            </div>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <div class="page-main-container" v-if="pathType == 'article2'">
                <div class="page-main-page-container">
                    <!-- 使用 Element Plus 的 Row 组件作为容器，gutter 属性可以添加列之间的间距 -->
                    <el-row class="content-wrapper">
                        <!-- 左侧推荐文章栏，占据 24 份中的 6 份 -->
                        <el-col :span="6">
                            <div class="sidebar">
                                <h3 class="sidebar-title">推荐文章</h3>
                                <ul class="recommended-list">
                                    <li v-for="article in totalArticles" :key="article.id">
                                        <span @click="goToArticleDetail(article.id)">{{ article.title }}</span>
                                    </li>
                                </ul>
                            </div>
                        </el-col>
                        <!-- 右侧主内容区，占据 24 份中的 18 份 -->
                        <el-col :span="18">
                            <div class="main-content">
                                <h2 class="main-title">家族馆文化</h2>
                                <div class="articles-list" v-if="mainArticles.length > 0">
                                    <ul>
                                        <li v-for="article in mainArticles" :key="article.id" class="article-item">
                                            <span @click="goToArticleDetail(article.id)" class="article-title">・ {{ article.title }}</span @click="goToArticleDetail(article.id)">
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagination-summary">
                                    <span>文章总数:{{ totalArticlesCount }}</span>
                                    <!-- <span>分页:{{ currentPage }}/{{ totalPages }}</span> -->
                                </div>
                                <div v-if="mainArticles.length == 0" style="width: 100%; text-align: center;">
                                    <el-empty description="暂无文章" />
                                </div>
                            </div>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <div class="page-main-container" v-if="pathType == 'personage'">
                <div class="page-main-title">
                    <span>人物纪念</span>
                </div>
                <div class="page-main-page-container">
                    <div class="memorial-hall" v-if="pager.lists.length > 0">
                        <div v-for="(person, index) in pager.lists" :key="index" class="person-item" @click="goToMuDetail(person.mu_id)">
                            <div class="person-avatar-placeholder">
                                <el-image
                                    :src="person.avatar"
                                    mode="scaleToFill"
                                />
                            </div>
                            <div class="person-name">{{ person.mu_name }}</div>
                        </div>
                    </div>
                    <div class="flex justify-end mt-4" v-if="pager.lists.length > 0">
                        <pagination v-model="pager" @change="getLists" ref="paginationRef"/>
                    </div>
                    <div v-if="pager.lists.length == 0" style="width: 100%; text-align: center;">
                        <el-empty description="暂无纪念人物" />
                    </div>
                </div>
            </div>
            <div class="page-main-container" v-if="pathType == 'leavel'">
                <div class="page-main-title">
                    <span>追思留言</span>
                </div>
                <div class="page-main-page-container">
                    <div class="guestbook-list" style="padding: 0 20px;box-sizing: border-box;" v-if="leaveNoteList.length > 0">
                        <div v-for="(post, index) in leaveNoteList" :key="index" class="dynamic-item">
                            <div class="dynamic-avatar-placeholder">
                                <el-image
                                    :src="post.jidian_info.file_url"
                                    mode="scaleToFill"
                                />
                            </div>
                            <div class="dynamic-content">
                                <p class="dynamic-text">{{ post.content }}</p>
                                <div class="dynamic-meta">
                                    <span>签名：{{ post.sign_name }}</span>
                                    <span>{{ post.create_time }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="leaveNoteList.length == 0" style="width: 100%; text-align: center;">
                        <el-empty description="暂无留言" />
                    </div>
                </div>
            </div>
        </el-main>
        <Footer :text="text"></Footer>
        
        <!-- 浮动申请加入按钮 -->
        <el-button 
            type="primary" 
            @click="applyJoin" 
            class="floating-apply-btn"
            size="large"
            v-if="!checkUserJoin && familyInfo.user_id != userStore.userInfo.id"
        >
            <el-icon><Plus /></el-icon>
            申请加入
        </el-button>
        <el-button 
            type="primary" 
            @click="applyMuJoinOpen" 
            class="floating-apply-btn"
            size="large"
            v-if="checkUserJoin || familyInfo.user_id == userStore.userInfo.id"
        >
            <el-icon><Plus /></el-icon>
            申请墓地加入
        </el-button>
        
        <!-- 浮动二维码按钮 -->
        <el-button 
            type="success" 
            @click="showQRCode" 
            class="floating-qr-btn"
            size="large"
            circle
        >
            <el-icon><img src="../../../assets/icons/qrcodeIcon.svg" alt="二维码" style="width: 40px !important; height: 40px;" /></el-icon>
        </el-button>
        
        <!-- 申请墓地加入弹窗 -->
        <el-dialog 
            v-model="muJoinDialogVisible" 
            title="选择要加入的墓地" 
            width="600px"
            :before-close="handleDialogClose"
        >
            <div class="mu-list-container">
                <div 
                    v-for="mu in availableMuList" 
                    :key="mu.mu_id"
                    class="mu-item"
                    :class="{ 'selected': selectedMuId === mu.mu_id }"
                    @click="selectMu(mu.mu_id)"
                >
                    <div class="mu-avatar">
                        <img :src="mu.avatar || '/default-avatar.png'" :alt="mu.mu_name" />
                    </div>
                    <div class="mu-name">{{ mu.mu_name }}</div>
                    <div class="selection-indicator" v-if="selectedMuId === mu.mu_id">
                        <el-icon><Check /></el-icon>
                    </div>
                </div>
            </div>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleDialogClose">取消</el-button>
                    <el-button 
                        type="primary" 
                        @click="confirmMuJoin"
                        :disabled="!selectedMuId"
                    >
                        加入
                    </el-button>
                </div>
            </template>
        </el-dialog>
        
        <!-- 二维码弹窗 -->
        <!-- <el-dialog 
            v-model="dialogVisible" 
            title="家族馆二维码" 
            width="400px"
        >
            <div class="qr-code-container">
                <div class="qr-code-image">
                    <QrcodeVue 
                        :value="qrValue" 
                        class="qrcode-element"
                        id="qrcode"
                        ref="qrcodeRef"
                        render-as="canvas"
                        :size="200"
                    />
                </div>
                <div class="qr-code-text">
                    <p>扫描二维码访问家族馆</p>
                </div>
            </div>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button 
                        type="primary" 
                        @click="downloadQRCode"
                    >
                        <el-icon><Download /></el-icon>
                        下载二维码
                    </el-button>
                </div>
            </template>
        </el-dialog> -->
        <QrCodePage 
            v-model="dialogVisible" 
            :qr-value="qrValue" 
            title="集体二维码"
        />
    </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus, Check, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import QrCodePage from '@/components/qrCodePage.vue';
import { familyDetail, mu_list, jidian_list, article_list, check_user_join, add_jidian, check_mu_join, mu_join, familyJoin_list, index_share_img } from '@/api/family'
import { apiMuJidianCate, apiMuJidianList } from '@/api/leaveNote'
import Header from '@/components/header/mini.vue'
import Footer from '@/components/footer/mini.vue'
import LoginPanel from '@/components/home/loginPanel.vue'
import { usePaging } from '@/hooks/usePaging'
const router = useRouter()
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
import path from 'path'
const route = useRoute()
const text = ref('本家族馆由 阿伟 于 2025/4/12 11:23:34 创建')
const selectedOffering = ref(0)
const leavelForm = ref<{
    [key: string]: any
}>({})
// 获取家族信息
const familyInfo = ref<{
    [key: string]: any
}>({})
const getFamilyDetail = async () => {
    const res = await familyDetail({id: Number(route.query.id)})
    console.log(res)
    familyInfo.value = res
    text.value = '本家族馆由 ' + res.sign_name + ' 于 ' + res.create_time + ' 创建'
}

// 获取纪念馆列表
const graveyardList = ref<Array<any>>([])
const getMu_list = async () => {
    const res = await mu_list({family_id: Number(route.query.id), page_no: 1, page_size: 8})
    console.log(res)
    graveyardList.value = res.list
}

// 获取家族留言列表
const leaveNoteList = ref<Array<any>>([])
const getLeaveDataList = async () => {
    const res = await jidian_list({family_id: Number(route.query.id), page_no: 1, page_size: 10})
    console.log(res)
    leaveNoteList.value = res.list
}

// 获取家族文章列表
const mainArticles = ref<Array<any>>([])
const totalArticles = ref<Array<any>>([])
const totalArticlesCount = ref(0)
const getArticleDataList = async () => {
    const res = await article_list({family_id: Number(route.query.id), page_no: 1, page_size: 10})
    console.log(res)
    totalArticles.value = res.list
    totalArticlesCount.value = res.total
    if(pathType.value == 'article1'){
        mainArticles.value = res.list.filter((item: any, index: number) => item.type == 1)
    }else{
        mainArticles.value = res.list.filter((item: any, index: number) => item.type == 2)
    }
}







// 获取人物纪念列表
const queryParams = ref({
    family_id: route.query.id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: mu_list,
    params: queryParams.value
})
getLists()

// 提交留言

const rules = reactive({
    content: [
        { required: true, message: '请输入留言', trigger: 'blur' },
    ],
    sign_name: [
        { required: true, message: '请输入留言人', trigger: 'blur' },
    ]
})
const ruleFormRef = ref<FormInstance>()

const submitMessage = async (formEl: FormInstance | undefined) => {
    if (selectedOffering.value == 0) return
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            add_jidian({family_id: Number(route.query.id), jidian_id: selectedOffering.value, ...leavelForm.value}).then((res) => {
                console.log(res)
                getLeaveDataList()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const pathType = ref('familyHome')
const goToPath = (path: string) => {
	pathType.value = path
    if(path == 'article1' || path == 'article2'){
        getArticleDataList()
    }
}



// 去纪念馆详情
const goToMuDetail = (mu_id: number) => {
    router.push('/memorialDetail?id=' + mu_id)
}


// 去文章详情
const goToArticleDetail = (article_id: number) => {
    router.push('/familyArticleDetail?id=' + article_id + '&family_id=' + route.query.id)
}

// 获取祭祀分类
const jidianCateList = ref<Array<any>>([])
const activeTab = ref(0)
const getJidianCate = async () => {
    const res = await apiMuJidianCate()
    console.log('res========================================',res)
    jidianCateList.value = res
    if (res.length > 0) {
        activeTab.value = res[0].id
        getJidianList(res[0].id)
    }
}

// 获取祭祀列表
const jidianList = ref<Array<any>>([])
const getJidianList = async (id: number) => {
    const res = await apiMuJidianList({cid: id})
    console.log(res)
    jidianList.value = res
}


// 切换祭奠分类
const changejidian = (id: number) => {
    activeTab.value = id
    getJidianList(id)
}

// 申请加入家族
const checkUserJoin = ref(false)
const applyJoin = async () => {
    try {
        // 这里可以添加申请加入的逻辑
        // 例如：调用API检查用户是否已加入，或者显示申请表单
        const res = await check_user_join({ family_id: Number(route.query.id) })
        if (res.is_join) {
            checkUserJoin.value = true
            ElMessage.warning('您已经是该家族的成员了')
        } else {
            ElMessage.success('申请已提交，请等待审核')
            // 这里可以添加更多申请逻辑
        }
    } catch (error) {
        ElMessage.error('申请失败，请稍后重试')
        console.error('申请加入失败:', error)
    }
}
// 申请墓地加入弹窗相关数据
const muJoinDialogVisible = ref(false)
const selectedMuId = ref(null)
const availableMuList = ref<Array<any>>([])




// 申请墓地加入，弹窗
const applyMuJoinOpen = async () => {
    try {
        // 获取可加入的墓地列表
        const res = await familyJoin_list({ family_id: Number(route.query.id) })
        availableMuList.value = res.list
        muJoinDialogVisible.value = true
        selectedMuId.value = null
    } catch (error) {
        ElMessage.error('获取墓地列表失败')
        console.error('获取墓地列表失败:', error)
    }
}

// 选择墓地
const selectMu = (muId: number) => {
    selectedMuId.value = muId
}

// 关闭弹窗
const handleDialogClose = () => {
    muJoinDialogVisible.value = false
    selectedMuId.value = null
}

// 确认加入墓地
const confirmMuJoin = async () => {
    if (!selectedMuId.value) {
        ElMessage.warning('请选择要加入的墓地')
        return
    }
    
    try {
        // 检查是否已加入该墓地
        const checkRes = await check_mu_join({ mu_id: selectedMuId.value })
        if (checkRes.is_join) {
            ElMessage.warning('您已经加入了该墓地')
            return
        }
        
        // 申请加入墓地
        await mu_join({ mu_id: selectedMuId.value })
        ElMessage.success('申请已提交，请等待审核')
        handleDialogClose()
    } catch (error) {
        ElMessage.error('申请失败，请稍后重试')
        console.error('申请加入墓地失败:', error)
    }
}
// 查看二维码
const qrValueUrl = ref('https://cqjsyh.com/H5/pages/family/index?family_id=' + route.query.id)
const qrValue = ref('')
const dialogVisible = ref(false)
const qrCodeInfo = ref<any>(null)

// 打开二维码弹窗
const showQRCode = async (params: any) => {
    qrCodeInfo.value = params

    // 获取二维码图片URL
    const res = await index_share_img({ url: qrValueUrl.value,family_id: params.id })
    qrValue.value = res.url
    dialogVisible.value = true
}

onMounted(async ()=>{
    getFamilyDetail()
    getMu_list()
    getLeaveDataList()
    getArticleDataList()
    if(route.query.pathType){
        pathType.value = route.query.pathType as string
    }

    getJidianCate()

    const res = await check_user_join({ family_id: Number(route.query.id) })
    if (res.is_join) {
        checkUserJoin.value = true
    } else {
        checkUserJoin.value = false
    }
})
</script>

<style scoped>
/* 全局和布局样式 */
.page-container {
    background-color: #f7f6f2;
    font-family:
        'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
        '微软雅黑', Arial, sans-serif;
    min-width: 1200px;
}

.page-header {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.page-main {
    width: 1200px;
    margin: 10px auto;
    padding: 0;
    /* background-color: transparent; */
    overflow: visible;
    /* border: #D2C7AB 1px solid; */
}

/* 顶部栏样式 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: #fff;
    padding: 0 10%;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-placeholder {
    width: 32px;
    height: 32px;
    background-color: #e0f0ff;
    border-radius: 4px;
    margin-right: 8px;
}

.logo-text {
    font-size: 16px;
    color: #3b74a3;
    font-weight: bold;
}

.user-nav a {
    margin-left: 20px;
    color: #888;
    text-decoration: none;
    font-size: 13px;
}
.user-nav a:hover {
    color: #2974a6;
}

/* Banner和主导航 */
.banner {
    width: 100%;
    height: 300px;
    background-color: #eae7df;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    position: relative;
}

.banner-title {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.family-name {
    font-family: 'KaiTi', '楷体', serif;
    font-size: 48px;
    color: #443c32;
    font-weight: 500;
}

.main-nav {
	width: 1200px;
    display: flex;
    height: 50px;
    align-items: flex-end;
	justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

}
.main-nav .nav-item {
    padding: 0 30px;
    line-height: 50px;
    color: #4c4c4c;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    /* font-weight: 500; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.main-nav .nav-item.active,
.main-nav .nav-item:hover {
    /* background-color: #fff; */
    color: #cc3300;
}
.main-nav-container{
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
}
.main-nav-container img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* 左侧栏样式 */
.intro-scroll-wrapper {
    min-height: 270px;
    padding: 30px 45px;
    background-color: #fdfaf2;
    border-left: 15px solid #d3c4a4;
    border-right: 15px solid #d3c4a4;
    margin-bottom: 24px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.intro-scroll-content p {
    width: 100%;
    word-break: break-all;
}

.scroll-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}
.intro-scroll-wrapper p {
    font-size: 14px;
    line-height: 2;
    color: #555;
    text-indent: 2em;
}

.box-card {
    border: 1px solid #e7e7e7;
    border-radius: 0;
    margin-bottom: 24px;
}

:deep(.el-card__header) {
    background-color: #fcfcfc;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
.card-header .button {
    padding: 0;
    font-size: 18px;
    color: #999;
}
:deep(.el-card__body) {
    padding: 20px;
}

/* 人物纪念馆 */
.memorial-hall {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
.person-item {
    text-align: center;
}
.person-avatar-placeholder {
    width: 110px;
    height: 110px;
    /* background-color: #e9e9e9; */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.person-avatar-placeholder image{
    width: 100%;
    height: 100%;
}
.person-name {
    color: #666;
    font-size: 14px;
}

/* 家族馆动态 & 留言列表 */
.dynamic-item {
    display: flex;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #e7e7e7;
}
.dynamics-list .dynamic-item:last-child,
.guestbook-list .dynamic-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.dynamic-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* background-color: #eee; */
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dynamic-content {
    flex-grow: 1;
}
.dynamic-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px 0;
}
.dynamic-meta {
    font-size: 12px;
    color: #aaa;
    display: flex;
    justify-content: space-between;
}
.no-more-posts {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 10px 0;
}

/* 右侧栏样式 */
/* --- 登录模块专属样式 --- */
.login-card :deep(.el-card__body) {
    padding: 25px 20px 20px;
}
.login-card :deep(.el-form-item) {
    margin-bottom: 20px;
}
.login-options-item {
    margin-bottom: 25px !important;
}
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
}
.forgot-password-link {
    color: #888;
    text-decoration: none;
}
.forgot-password-link:hover {
    color: #2974a6;
}

.login-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
}
.register-prompt {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin-top: -10px; /* 拉近与按钮的距离 */
}
.register-prompt a {
    color: #2974a6;
    text-decoration: none;
}
.register-prompt a:hover {
    text-decoration: underline;
}

/* --- 追思留言模块专属样式 --- */
.form-card {
    background-color: #fdfdfd;
}
.form-card :deep(.el-form-item) {
    margin-bottom: 18px;
}
.form-card :deep(.el-form-item__label) {
    color: #666;
    font-weight: 500;
}
.tribute-icons {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 0 10px;
}
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.icon-placeholder {
    width: 32px;
    height: 32px;
    background-color: #f0f0f0;
    margin-bottom: 8px;
}
.icon-item span {
    font-size: 12px;
    color: #888;
}


.submit-btn {
    width: 100%;
    background-color: #2974a6;
    color: white;
    border-color: #2974a6;
    height: 38px;
    font-size: 16px;
}
.submit-btn:hover {
    background-color: #1f5c83;
    border-color: #1f5c83;
}

/* 最后一个 card 不需要下外边距 */
.left-column > .box-card:last-child,
.right-column > .box-card:last-child {
    margin-bottom: 0;
}

.login-wrapper{
    margin: 0 !important;
}

.family-bg{
    width: 100%;
    height: auto;
}




/* 红色边框的总容器 */
.content-wrapper {
  border: 1px solid red;
  background-color: #ffffff;
}

/* 左侧栏样式 */
.sidebar {
  background-color: #f5f1e6; /* 从图片中拾取的背景色 */
  padding: 15px;
  /* 确保边框和背景色填满整个列的高度 */
  height: 100%;
  box-sizing: border-box; /* 让 padding 不会撑大宽度 */
}

.sidebar-title {
  font-size: 16px;
  font-weight: bold;
  color: #555;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdcdc;
}

.recommended-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommended-list li {
  margin-bottom: 10px;
  border-bottom: 1px solid #dcdcdc;
  cursor: pointer;
}

.recommended-list a {
  text-decoration: none;
  color: #333;
}

.recommended-list a:hover {
  text-decoration: underline;
  color: #c00;
}

/* 右侧主内容区样式 */
.main-content {
  padding: 20px 25px;
  border-left: 1px solid #e0e0e0; /* 在右侧内容区的左边加一条分割线 */
  height: 100%;
  box-sizing: border-box;
}

.main-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.articles-list {
  min-height: 150px; /* 给一个最小高度，避免内容少时塌陷 */
}

.articles-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #ccc;
  cursor: pointer;
}

.article-title {
  text-decoration: none;
  color: #333;
}

.article-title:hover {
  color: #c00;
}

.article-date {
  color: #666;
  font-size: 13px;
}

/* 底部分页信息样式 */
.pagination-summary {
  margin-top: 20px;
  text-align: right;
  color: #666;
  font-size: 13px;
}

.pagination-summary span {
  margin-left: 20px;
}
.page-main-title{
    width: 100%;
    padding: 30px 20px 10px 20px;
    box-sizing: border-box;
    
    font-size: 20px;
}
.page-main-title span{
    width: 100%;
    display: flex;
    border-bottom: #D2C7AB 1px solid;
}
.page-main-page-text{
    width: 100%;
    padding: 30px 30px 50px 30px;
    box-sizing: border-box;
    font-size: 14px;
}

.offerings-container {
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff; /* 白色背景 */
}

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 列布局，更接近原图 */
    gap: 20px 15px; /* 行间距和列间距 */
}

.offering-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.offering-image-placeholder {
    width: 40px; /* 根据需要调整大小 */
    height: 40px; /* 根据需要调整大小 */
    margin-bottom: 5px;
    display: flex; /* 使 ElImage 正常工作 */
    justify-content: center;
    align-items: center;
    border: 1px solid #eee; /* 图片边框 */
}
.offering-image-placeholder .el-image {
    max-width: 100%;
    max-height: 100%;
}
.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #c0c4cc;
    font-size: 12px;
}

.offering-info {
    display: flex;
    flex-direction: column; /* 让会员标识在下方 */
    align-items: center;
    margin-top: 5px;
}

/* 单选按钮样式调整 */
.offering-info :deep(.el-radio) {
    margin-right: 0; /* 移除默认右边距 */
}
.offering-info :deep(.el-radio__label) {
    font-size: 12px;
    padding-left: 5px; /* 文字与按钮间距 */
}

/* 浮动申请加入按钮样式 */
.floating-apply-btn {
    position: fixed;
    bottom: 80px;
    right: 80px;
    z-index: 1000;
    border-radius: 50px;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(64, 158, 255, 0.3);
    transition: all 0.3s ease;
}

.floating-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(64, 158, 255, 0.4);
}

.floating-apply-btn .el-icon {
    margin-right: 8px;
    font-size: 18px;
}

/* 浮动二维码按钮样式 */
.floating-qr-btn {
    position: fixed;
    bottom: 150px;
    right: 80px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(103, 194, 58, 0.3);
    transition: all 0.3s ease;
}

.floating-qr-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(103, 194, 58, 0.4);
}

.floating-qr-btn .el-icon {
    font-size: 24px;
}

/* 墓地加入弹窗样式 */
.mu-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.mu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: #fafafa;
}

.mu-item:hover {
    border-color: #409eff;
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.2);
}

.mu-item.selected {
    border-color: #409eff;
    background: #e6f7ff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.mu-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mu-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
}

.selection-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: #409eff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 弹窗标题样式 */
:deep(.el-dialog__header) {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #e8e8e8;
}

:deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* 弹窗内容区域 */
:deep(.el-dialog__body) {
    padding: 20px;
}

/* 二维码弹窗样式 */
.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.qr-code-image {
    margin-bottom: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.qr-code-text {
    text-align: center;
}

.qr-code-text p {
    margin: 8px 0;
    color: #666;
}

.qr-url {
    font-size: 12px;
    color: #999;
    word-break: break-all;
    max-width: 300px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .mu-list-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .mu-item {
        padding: 15px;
    }
    
    .mu-avatar {
        width: 60px;
        height: 60px;
    }
    
    .floating-qr-btn {
        right: 20px;
        bottom: 160px;
        width: 50px;
        height: 50px;
    }
    
    .floating-apply-btn {
        right: 20px;
        bottom: 80px;
        padding: 12px 20px;
        font-size: 14px;
    }
}
</style>
